<template>
  <!-- 滚动条部分 -->
  <view class="timebox">
    <view v-for="(item, index) in timeSlots" :key="index" class="time">
      <text class="text1">{{ item.dayName }}</text>
      <text class="text2">{{ item.date }}</text>
    </view>
  </view>
  <!-- 滚动条部分 -->
</template>

<script>
export default {
  data() {
    return {
      today: new Date(),
      timeSlots: []
    };
  },
  mounted() {
    this.generateTimeSlots();
  },
  methods: {
    updateDate(date, days) {
      const result = new Date(date);
      result.setDate(result.getDate() + days);
      return result;
    },
    formatDate(date) {
      const day = date.getDate().toString().padStart(2, '0');
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      return `${month}.${day}`;
    },
    getDayName(date) {
      const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      return days[date.getDay()];
    },
    generateTimeSlots() {
      const startDate = new Date(this.today.getFullYear(), this.today.getMonth(), 1);
      const endDate = new Date(this.today.getFullYear(), this.today.getMonth() + 1, 0);
      let currentDate = new Date(startDate);

      while (currentDate <= endDate) {
        const formattedDate = this.formatDate(currentDate);
        const dayName = this.getDayName(currentDate);
        this.timeSlots.push({ dayName, date: formattedDate });
        currentDate.setDate(currentDate.getDate() + 1);
      }
    }
  }
};
</script>

<style>
.timebox {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: auto; /* 允许在需要时出现滚动条 */
  scrollbar-width: none; /* Firefox 去除滚动条 */
}

.timebox::-webkit-scrollbar {
  display: none; /* Chrome, Safari 和 Opera 去除滚动条 */
}

.time {
  flex: 0 0 25%;
  width: 25%;
  text-align: center;
  font-size: 26rpx;
  color: #7e7e7e;
  scroll-snap-align: start;
}

.text1, .text2 {
  display: block;
}
</style>